<template>
    <view class="content">
		<view class="hello">
           <view class="title" style="text-align: center;">
             距离考研还有<text style="color: red;margin-left: 10upx;margin-right: 10upx; font-size: 44upx;">{{timeNum}}</text> 天
           </view>
            <view class="ul">
				<view v-if="!hasLogin" class="hello">
				    <view class="title">
				        您好 游客。
				    </view>
				</view>
				<view v-if="hasLogin" class="hello">
				   <view> 您好 {{userName}}</view>
				   <view>您已成功登录</view>
				</view>
                
            </view>
			 <view class="center-list">
				 <view class="center-list-item border-bottom" @click="articlePublish5">
				 	<text class="list-icon">&#xe639;</text>
				 	<text class="list-text">我的关注</text>
				 	<text class="navigat-arrow">&#xe65e;</text>
				 </view>
			 	<view class="center-list-item border-bottom" @click="articlePublish1">
			 		<text class="list-icon">&#xe639;</text>
			 		<text class="list-text">频道信息发布</text>
			 		<text class="navigat-arrow">&#xe65e;</text>
			 	</view>
			 	<view class="center-list-item border-bottom" @click="articlePublish2">
			 		<text class="list-icon">&#xe639;</text>
			 		<text class="list-text">考研信息发布</text>
			 		<text class="navigat-arrow">&#xe65e;</text>
			 	</view>
				<view class="center-list-item border-bottom" @click="articlePublish3">
					<text class="list-icon">&#xe639;</text>
					<text class="list-text">考研资料发布</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
				<view class="center-list-item border-bottom" @click="articlePublish4">
					<text class="list-icon">&#xe639;</text>
					<text class="list-text">考研心得发布</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
				
			 </view>
			 
        </view>
		 <view class="btn-row">
		    <button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button>
		    <button v-if="hasLogin" type="default" @tap="bindLogout">退出登录</button>
		</view>
    </view>
</template>

<script>
    import {
        mapState,mapMutations
    } from 'vuex'

    export default {
        computed: mapState(['forcedLogin', 'hasLogin', 'userName','timeNum']),
		methods: {
		    ...mapMutations(['logout']),
			articlePublish5() {
			    uni.navigateTo({
			        url: '../list/list/list',
			    });
			},
		    articlePublish4() {
		        uni.navigateTo({
		            url: '../form/form3',
		        });
		    },articlePublish3() {
		        uni.navigateTo({
		            url: '../form/form2',
		        });
		    },articlePublish2() {
		        uni.navigateTo({
		            url: '../form/form1',
		        });
		    },articlePublish1() {
		        uni.navigateTo({
		            url: '../form/form',
		        });
		    },bindLogin() {
		        uni.navigateTo({
		            url: '../login/login',
		        });
		    },
		    bindLogout() {
		        this.logout();
		        /**
		         * 如果需要强制登录跳转回登录页面
		         */
		        if (this.forcedLogin) {
		            uni.reLaunch({
		                url: '../login/login',
		            });
		        }
		    }
		},mounted() {
			console.log('mounted')
		},
        onLoad() {
			console.log('onLoad')
            if (!this.hasLogin) {
                uni.showModal({
                    title: '未登录',
                    content: '您未登录，需要登录后才能继续',
                    /**
                     * 如果需要强制登录，不显示取消按钮
                     */
                    showCancel: !this.forcedLogin,
                    success: (res) => {
                        if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
                            if (this.forcedLogin) {
                                uni.reLaunch({
                                    url: '../login/login'
                                });
                            } else {
                                uni.navigateTo({
                                    url: '../login/login'
                                });
                            }
                        }
                    }
                });
            }
        }
    }
</script>

<style>
    .hello {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .title {
        color: #8f8f94;
        margin-top: 50upx;
    }

    .ul {
        font-size: 30upx;
        color: #8f8f94;
        margin-top: 50upx;
    }

    .ul>view {
        line-height: 50upx;
    }@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #2F85FC;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #2F85FC;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>
